// 引入Count UI 
import CountUI from "../../components/Count";
import { createIncrementAction, createDecrenmentAction,createIncrementAsyncAction } from '../../redux/count_action'

// 引入connect 用于链接UI组件与redux 

import { connect } from 'react-redux'

/**
 *  mapStateToProps函数的返回值作为状态 传递给了UI组件 
 * props 的key,value 就作为传递给UI组件的 props的value
 * 
 * 1.mapStateToProps 函数返回的是一个对象 
 * 2.返回的对象中的key 就作为传递给UI组件的props的key, value 就作为传递给UI组件的Props的value 
 * 3.mapStateToProps 用于传递状态 
 */
function mapStateToProps(state) {
    return { count: state }
}

/**
 * mapDispatchToProps 函数 用于操作状态的方法  
 *  * 1.mapStateToProps 函数返回的是一个对象 
 * 2.返回的对象中的key 就作为传递给UI组件的props的key, value 就作为传递给UI组件的Props的value 
 * 3.mapStateToProps 用于传递操作状态的方法 
 */
function mapDispatchToProps(dispatch) {
    return {
        // add: (number) => {dispatch(createIncrementAction(number))}
        add: number => dispatch(createIncrementAction(number)),
        jian:number=>dispatch(createDecrenmentAction(number)),
        addAsync:number=>dispatch(createIncrementAsyncAction(number))
    }
}

// 创建容器组件  
const CountContianer = connect(mapStateToProps, mapDispatchToProps)(CountUI)

// 暴露容器组件 
export default CountContianer